<template>
  <div v-show="getShow">
    <h2 class="login-title">登录</h2>
    <a-form ref="loginForm" :model="formState" autocomplete="off" :label-col="labelCol" style="width: 18rem"
      scrollToFirstError @finish="onFinish" @finishFailed="onFinishFailed">
      <a-form-item name="userName" :rules="[
    { required: true, message: '请输入用户名!' },
    { validator: isPhoneNumber, trigger: 'blur' },
    { pattern: /^[0-9]+$/, message: '用户名只能包含数字!' },
  ]">
        <a-input v-model:value="formState.userName" placeholder="请输入用户名" autocomplete="off">
          <template #prefix>
            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="passWord" :rules="[{ required: true, message: '请输入密码!' }]">
        <a-input-password v-model:value="formState.passWord" placeholder="请输入密码" autocomplete="off">
          <template #prefix>
            <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button style="width: 18rem; border-radius: 6px" type="primary" html-type="submit" block>
          登 录
        </a-button>
      </a-form-item>
    </a-form>
    <div>
      <a-space class="login-btn-list">
        <!-- <a-button @click="setLoginState('register')" class="login-form-button">
          注册
        </a-button> -->
        <a-button type="link"  @click="userLoginValue = 1">注册账号</a-button>
        <a-button type="link"  @click="userLoginValue = 2">忘记密码</a-button>

      </a-space>
    </div>
  </div>
  <DxToken ref="dxTokenRef" @onSuccessfully="getToken"></DxToken>

</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue';
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/modules/user'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const { userLoginValue } = storeToRefs(userStore)
const router = useRouter()
import loginBg from './login-bg.png';
let labelCol = { span: 4 }

const getShow = computed(() => {
  return 'login'
});
let loginForm = ref<HTMLElement | null>(null)
interface formState {
  userName: string | number
  passWord: string | number
}
const formState = ref<formState>({
  userName: '',
  passWord: '',
})

const onFinishFailed = (errorInfo: any) => { }
const onFinish = async (values: any) => {
  dxTokenRef.value.callbackFn()

  // let params = {
  //   userName: formState.value.userName,
  //   password: formState.value.passWord,
  // }
  // await userStore.login(params)
  // router.push({ path: '/' })
}
const isPhoneNumber = (rule: any, value: any, callback: any) => {
  const phoneRegex = /^1[3-9]\d{9}$/ // 假设这是中国的手机号格式
  const numberGex = /^[0-9]+$/
  if (!phoneRegex.test(value) && value && numberGex.test(value)) {
    callback(new Error('请输入有效的手机号！'))
  } else {
    callback()
  }
}

// 顶象验证码
let dxTokenRef = ref()
const getToken = async (e: any) => {
  let params = {
    userName: formState.value.userName,
    password: formState.value.passWord,
  }
  await userStore.login(params)
  router.push({ path: '/' })
}





</script>

<style lang="less" scoped>
.login-title {
  margin-bottom: 30px;
  font-size: 18px;
}

.hr {
  font-size: .9rem;
  color: #575656;
}

.login-form {
  max-width: 400px;
  background-color: #fff;
  overflow: hidden;

  .login-code {
    cursor: pointer;
  }
}

.login-btn-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // flex-wrap: wrap;
}

.other-login-type {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 22px;

  .type-item {
    cursor: pointer;

  }
}
</style>
